<template>
  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template slot="filter-content">
        <el-input
          v-model="listQuery.params.lessonName"
          style="width: 200px"
          placeholder="搜索课程名"
          class="filter-item"
        />

        <el-input
          v-if="!isTeacher"
          v-model="listQuery.params.teacherName"
          style="width: 200px"
          placeholder="搜索老师名"
          class="filter-item"
        />
      </template>

      <template slot="data-columns">

        <el-table-column align="center" label="课程名" prop="lessonName" />

        <el-table-column align="center" label="课时" prop="lessonPeriod" />

        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            {{ scope.row.lessonType | lessonTypeFilter }}
          </template>
        </el-table-column>

        <el-table-column v-if="!isTeacher" align="center" label="授课老师" prop="teacherName" />

        <el-table-column align="center" label="学生人数" prop="studentNum" />

        <el-table-column align="center" label="创建时间" prop="createTime" />

        <el-table-column v-if="isTeacher" align="center" label="操作项" width="280">
          <template v-if="isTeacher" slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-share"
              @click="studentsDetail(scope.row)"
            >学生列表
            </el-button>
            <el-button
              id="btnEdit"
              size="mini"
              type="warning"
              icon="el-icon-share"
              @click="lessonDetail(scope.row)"
            >考试详情
            </el-button>
          </template>
        </el-table-column>
      </template>
    </data-table>

  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import { getRole } from '@/api/user/lesson'

export default {
  name: 'LessonList',
  components: { DataTable },

  filters: {
    // 课程类型
    lessonTypeFilter(value) {
      const map = {
        0: '选修',
        1: '必修'
      }
      return map[value]
    }
  },

  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {}
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/exam/api/user/lesson/paging'
      },
      lesson: {
        lessonId: '',
        lessonName: '',
        teacherId: ''
      },
      isTeacher: true
    }
  },

  created() {
    getRole().then((response) => {
      const roleIds = response.data
      if (roleIds.indexOf('teacher') >= 0) {
        this.isTeacher = true
      } else {
        this.isTeacher = false
      }
    })
  },

  methods: {
    lessonDetail(row) {
      this.lesson.lessonId = row.lessonId
      this.lesson.lessonName = row.lessonName
      this.lesson.teacherId = row.teacherId
      this.$router.push({ name: 'LessonExam', params: { lesson: this.lesson }})
    },
    studentsDetail(row) {
      this.lesson.lessonId = row.lessonId
      this.lesson.lessonName = row.lessonName
      this.lesson.teacherId = row.teacherId
      this.lesson.teacherName = row.teacherName
      this.$router.push({ name: 'StudentList', params: { lesson: this.lesson }})
    }
  }
}
</script>
